<ng-container *ngIf="dataSubject$ | async">
  <ng-container [formGroup]="form">
    <ng-container formArrayName="headers">
      <div class="headers-list">
        <div
          class="header-item"
          *ngFor="let header of headers.controls; index as headerIndex"
          [formGroupName]="headerIndex"
          [ngClass]="{
            'mb-2': headerIndex !== headers.controls.length - 1
          }"
        >
          <div class="input-group" style="position: relative">
            <input
              type="text"
              class="form-control me-2"
              placeholder="name"
              formControlName="key"
              [ngbTypeahead]="headerNamesSearch"
            />
            <input
              type="text"
              class="form-control"
              placeholder="value"
              formControlName="value"
              [ngbTypeahead]="headerValuesSearch"
            />

            <button
              *ngIf="deleteHeaderRequested$ | async as deleteHeaderRequested"
              type="button"
              class="btn btn-link btn-icon"
              [ngClass]="{
                'text-danger':
                  deleteHeaderRequested.enabled === true &&
                  deleteHeaderRequested.payload === headerIndex
              }"
              [ngbTooltip]="
                deleteHeaderRequested.enabled === true &&
                deleteHeaderRequested.payload === headerIndex
                  ? 'Confirm'
                  : 'Delete'
              "
              (click)="removeHeader(headerIndex)"
            >
              <app-svg icon="delete"></app-svg>
            </button>
          </div>
        </div>
      </div>

      <div class="d-flex justify-content-between">
        <button
          type="button"
          class="btn btn-link btn-icon mt-2 add-header"
          (click)="addHeader()"
        >
          <app-svg icon="add_box" class="text-success pe-2"></app-svg>
          Add header
        </button>
        <button
          *ngIf="secondaryButton"
          type="button"
          class="btn btn-link btn-icon mt-2 text-primary add-header-secondary"
          (click)="secondaryButtonClicked.emit()"
        >
          {{ secondaryButton }}
        </button>
      </div>
    </ng-container>
  </ng-container>
</ng-container>
